<template>
  <div class="canvas">
    <el-card class="box-card">
      <h2>防抖和节流</h2>
      <div class="contentDescription">
        <h3>介绍</h3>
        <div class="content">
          &nbsp;&nbsp;&nbsp;&nbsp;防抖和节流都是为了解决事件频繁触发的问题，但在实现原理上有些不同。
        </div>
        <h3>使用</h3>
        <div class="content">
          &nbsp;&nbsp;&nbsp;&nbsp;直接复制粘贴即可
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <h2>防抖（debounce）</h2>
      <div style="margin-bottom:10px">
          <ul>
            <li class="df">
              <div><i class="el-icon-location-outline green"></i></div>
              <div>原理:当持续触发事件时，在一定时间内没有再触发事件，事件才会处理函数一次，如果在设定的时间到来之前，
                又触发了事件，则重新开启定时器，执行最后一次触发事件。
              </div>
            </li>
            <li class="df">
              <div><i class="el-icon-location-outline green"></i></div>
              <div>应用场景:scroll事件滚动、浏览器窗口的缩放resize事件、搜索框输入查询的时候、表单验证、按钮的提交事件等。</div>
            </li>
          </ul>
      </div>
    </el-card>
    <el-card class="box-card">
      <h2>实现代码</h2>
      <div class="contentDescription">
        <div class="content" >
          <codeBlock :code="xnyhCode.fnA"></codeBlock>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <h2>节流（throttle）</h2>
      <div style="margin-bottom:10px">
          <ul>
            <li class="df">
              <div><i class="el-icon-location-outline green"></i></div>
              <div>原理:在持续触发事件时，在一定时间内只调用一次函数，如果在规定时间内，再次触发此事件，则直接忽略不执行，
                其主要目的就是减少一段时间的触发频率。
              </div>
            </li>
            <li class="df">
              <div><i class="el-icon-location-outline green"></i></div>
              <div>应用场景:DOM元素拖拽功能实现、计算鼠标移动距离、监听scroll滚动事件、搜索、提交等按钮功能</div>
            </li>
          </ul>
      </div>
    </el-card>
    <el-card class="box-card">
      <h2>实现代码</h2>
      <div class="contentDescription">
        <div class="content" >
          <codeBlock :code="xnyhCode.fnB"></codeBlock>
        </div>
      </div>
    </el-card>
  </div>  
</template>

<script>
import codeBlock from '@/components/code.vue'
import xnyhCode from './js/xnyhLib'
export default {
  name: "VuedemoCanvas",
  components: {
    codeBlock
  },
  data() {
    return {
      xnyhCode:xnyhCode
    };
  },

  mounted() {
    
  },

  methods: {

  },
};
</script>

<style lang="scss" scoped>
.contentBox {
  margin: 0 auto;
  width: 100%;
  height: 360px;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  .box {
    position: relative;
    width: 600px;
    height: 300px;
    margin: 0 20px;
    // padding: 100px;
    .imgbox {
      position: relative;
      width: 100%;
      height: 100%;
      user-select: none;
      // margin: 100px;
      // padding: 10px;
    }
  }
  .box2 {
    border: 1px solid #928c8c;
    width: 600px;
    height: 300px;
  }
  .imgbox2 {
    width: 600px;
    height: 300px;
    user-select: none;
    // margin: 100px;
    // padding: 10px;
  }
}
.canvas {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  .contentDescription {
    margin-left: 50px;
    .content {
      margin-left: 20px;
    }
  }
}
.box-card {
  width: 80%;
  margin-bottom: 20px;
}
</style>
<style >
.CodeMirror-scroll{
  background-color: #f6f8fa !important;
  height: 500px;
}
.CodeMirror {
  height: 500px;
  overflow-y: hidden;
  background-color: #f6f8fa !important;
}
.code-box{
  height: 100%;
  overflow: auto;
}
.green{
  color: rgb(62, 175, 124);
  margin-right: 10px;
}
.df{
  display: flex;
  line-height: 30px;
}
</style>